<template>
	<view class="chat-main-box cover-screen-position flex-column-start-center"
		:style="{backgroundImage:`url(https://cdn.osisx.com/game/image/240be19f83244295a8d2868598f30508.png)`}"
		v-if="isShowLevelMain">
		<view class="back-box" style="width: 100%;">
			<mBack ref="fullScreenBack" @getGameResult="close">
			</mBack>
		</view>

		<view class="top-box" :style="{height:topBoxHeight+'rpx'}"></view>
		<view class="chat-main-top flex-row-start-end">
			<view class="chat-main-avatar">
				<image :src="avatar" class="cover-img" mode="aspectFill" style="border-radius: 50%;"></image>
				<view class="chat-heart m-heart flex-row-center-center">
					<image class="cover-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1967c24a13564a45975e2af8ff5f010d.png"
						mode="aspectFill"></image>
					<view class="heart-num">{{heartLevel}}</view>
				</view>
			</view>
			<view class="chat-main-info flex-column-between-start">
				<view class="chat-main-name">{{agentName}}</view>
				<view>
					<view class="chat-main-level-text flex-row-start-center">
						<text style="margin-right: 6rpx;">Lv.0</text><text>10/200</text>
					</view>
					<view class="chat-main-level-progress">
						<view class="heart-progress-inner" :style="{width:20+'%'}"></view>
					</view>
				</view>
			</view>

		</view>
		<view class="chat-main-content">
			<scroll-view ref="chatMainScroll" scroll-y class="scroll-content" :show-scrollbar="false"
				:scroll-with-animation="true">
				<view class="chat-levels flex-column-start-center">
					<view class="chat-level-item flex-column-start-center" v-for="(item,index) in levelList"
						:key="index">
						<view class="level-locked-label flex-row-center-center" v-if="item.locked">
							未解锁
						</view>
						<view class="chat-top-level flex-row-start-center">
							<view class="level-icon">
								<image class="cover-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1967c24a13564a45975e2af8ff5f010d.png"
									mode="aspectFill"></image>
								<text class="level-text">{{item.level}}</text>
							</view>
							<view class="level-num">
								Lv.{{item.level}}
							</view>

						</view>
						<view class="chat-intro flex-row-start-end">
							<!-- <view class="chat-intro-icon"></view> -->
							<view class="chat-intro-text">
								<view class="chat-intro-text-title">{{item.title}}</view>
								<view class="chat-intro-text-content">{{item.intro}}</view>
							</view>
							<view class="chat-intro-btn flex-row-center-center"
								:class="{'chat-intro-btn-locked':item.locked}" v-if="!item.locked">去聊天</view>

							<view class="chat-intro-btn" style="opacity: 0;" v-if="item.locked"></view>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	import mBack from "@/components/m-back/index.vue"
	export default {
		components: {
			mBack
		},
		props: {
			avatar: {
				type: String,
				default: "https://cdn.osisx.com/game/image/76784eb5a4fa4754818d9523934a43f2.png"
			},
			heartLevel: {
				type: Number,
				default: 0
			},
			agentName: {
				type: String,
				default: ""
			},
			topBoxHeight: {
				type: Number,
				default: 170
			}
		},
		data() {
			return {
				isShowLevelMain: true,
				levelList: [{
						level: 0,
						title: "文字聊天",
						intro: "指尖轻敲，在字里行间开启一段旖旎之旅吧",
						locked: false
					},
					{
						level: 1,
						title: "文字聊天",
						intro: "指尖轻敲，在字里行间开启一段旖旎之旅吧",
						locked: true
					},
					{
						level: 2,
						title: "文字聊天",
						intro: "指尖轻敲，在字里行间开启一段旖旎之旅吧",
						locked: true
					},
					{
						level: 3,
						title: "文字聊天",
						intro: "指尖轻敲，在字里行间开启一段旖旎之旅吧",
						locked: true
					},
					{
						level: 4,
						title: "文字聊天",
						intro: "指尖轻敲，在字里行间开启一段旖旎之旅吧",
						locked: true
					},
					{
						level: 5,
						title: "文字聊天",
						intro: "指尖轻敲，在字里行间开启一段旖旎之旅吧",
						locked: true
					},

				]
			}
		},
		methods: {
			open() {
				this.isShowLevelMain = true
			},
			close() {
				this.isShowLevelMain = false
				this.$emit('close')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.chat-main-box {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		z-index: 999;
		background-color: #fff;
		box-sizing: border-box;

		.chat-main-top {
			width: 100%;
			padding: 0rpx 30rpx;
			margin-bottom: 40rpx;

			.chat-main-avatar {
				position: relative;
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				margin-right: 30rpx;
				background-color: #fff;
				border: 2rpx solid #fff;

				.chat-heart {
					position: absolute;
					width: 60rpx;
					height: 60rpx;
					right: -20rpx;
					bottom: 0rpx;
				}
			}

			.chat-main-info {
				width: 300rpx;
				height: 100%;
				// background-color: pink;

				.chat-main-name {
					font-size: 32rpx;
					line-height: 32rpx;
					font-weight: 700;
					color: #fff;
					text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
					margin-top: 20rpx;
				}

				.chat-main-level-text {
					font-size: 20rpx;
					line-height: 20rpx;
					color: rgba(255, 255, 255, 1);
					text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
					margin-bottom: 20rpx;
				}

				.chat-main-level-progress {
					position: relative;
					width: 200rpx;
					height: 16rpx;
					border-radius: 10rpx;
					background-color: rgba(255, 255, 255, .6);
					padding: 2rpx;
					pointer-events: fill;

					.heart-progress-inner {
						height: 100%;
						background-image: linear-gradient(to right, rgba(253, 59, 87, 1)0%, rgba(253, 204, 170, 1)100%);
						border-radius: 10rpx;
						transition: width 0.3s linear;
					}
				}
			}
		}

		.chat-main-content {
			flex: 1;
			width: 100%;
			overflow: hidden;
			padding: 0rpx 30rpx;

			.chat-levels {
				width: 100%;

				.chat-level-item {
					position: relative;
					width: 100%;
					height: 200rpx;
					background-color: #fff;
					border-radius: 30rpx;
					margin-bottom: 20rpx;
					box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .1);
					padding: 20rpx 30rpx;
					overflow: hidden;

					.level-locked-label {
						position: absolute;
						right: 0rpx;
						top: 0rpx;
						width: 100rpx;
						height: 40rpx;
						background-color: #ececec;
						color: #c6c6c6;
						border-radius: 0rpx 0rpx 0rpx 10rpx;
						font-size: 24rpx;
						line-height: 24rpx;

					}

					.chat-top-level {
						width: 100%;
						margin-bottom: 20rpx;

						.level-icon {
							position: relative;
							width: 60rpx;
							height: 60rpx;
							margin-right: 18rpx;

							.level-text {
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								font-size: 20rpx;
								line-height: 20rpx;
								color: #fff;
								font-weight: 400;

							}
						}

						.level-num {
							font-size: 32rpx;
							line-height: 32rpx;
							font-weight: 700;
							color: #9366eb;
						}

					}


					.chat-intro {
						flex: 1;
						width: 100%;

						// .chat-intro-icon {
						// 	width: 120rpx;
						// 	height: 120rpx;
						// 	background-color: pink;
						// 	border-radius: 50%;
						// 	margin-right: 10rpx;
						// }

						.chat-intro-text {
							flex: 1;
							margin-right: 20rpx;

							.chat-intro-text-title {
								width: 100%;
								font-size: 30rpx;
								line-height: 30rpx;
								color: #383831;
								font-weight: 700;
								margin-bottom: 10rpx;
							}

							.chat-intro-text-content {
								width: 100%;
								text-wrap: wrap;
								font-size: 24rpx;
								line-height: 32rpx;
								color: #949292;
							}
						}

						.chat-intro-btn {
							width: 140rpx;
							height: 55rpx;
							border-radius: 15rpx;
							background-color: #9366eb;
							font-size: 28rpx;
							line-height: 28rpx;
							color: #fff;
							font-weight: 700;
						}

						.chat-intro-btn-locked {
							background-color: #eeeeee;
							color: #c7c7c7;
						}
					}
				}
			}
		}


	}

	.m-heart {
		position: relative;
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;

		.heart-num {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-size: 20rpx;
			line-height: 20rpx;
			color: #fff;
			font-weight: 400;
		}
	}
</style>